<template>
  <el-card class="question-card" shadow="hover">
    <template #header>
      <div class="flex justify-between items-center">
        <el-input
          v-model="question.title"
          placeholder="请输入题目标题"
          style="width: 70%"
        />
        <el-select v-model="question.type" placeholder="题目类型" style="width: 120px">
          <el-option label="单选题" value="radio" />
          <el-option label="多选题" value="checkbox" />
          <el-option label="填空题" value="text" />
        </el-select>
      </div>
    </template>

    <!-- 如果是选择题才显示选项 -->
    <div v-if="question.type !== 'text'">
      <div
        v-for="(option, idx) in question.options"
        :key="option.id"
        class="option-item"
      >
        <el-input
          v-model="option.text"
          placeholder="请输入选项内容"
          style="width: 80%"
        />
        <el-button type="danger" icon="Delete" @click="removeOption(idx)" circle />
      </div>

      <el-button
        type="primary"
        size="small"
        plain
        @click="addOption"
        icon="Plus"
      >
        添加选项
      </el-button>
    </div>

    <!-- 是否必答 -->
    <div class="mt-3">
      <el-switch v-model="question.required" active-text="必答" />
    </div>

    <div class="mt-3 text-right">
      <el-button type="danger" @click="$emit('delete')">删除题目</el-button>
    </div>
  </el-card>
</template>

<script setup>
const { question } = defineProps({
  question: {
    type: Object,
    required: true
  }
})

function addOption() {
  if (!Array.isArray(question.options)) {
    question.options = []
  }
  question.options.push({ id: crypto.randomUUID(), text: '' })
}

function removeOption(index) {
  question.options.splice(index, 1)
}
</script>

<style scoped>
.question-card {
  margin-bottom: 16px;
}
.option-item {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
  gap: 8px;
}
</style>
